<template>
  <div class="app-container">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="header-content">
        <div class="logo" @click="$router.push('/')">美味外卖</div>
        <div class="location">
          <i class="el-icon-location"></i>
          <span>北京市朝阳区</span>
        </div>
        <div class="search">
          <el-input 
            placeholder="搜索商家、美食..." 
            prefix-icon="el-icon-search"
            v-model="searchText"
            @keyup.enter.native="onSearch"
          ></el-input>
        </div>
        <div class="nav">
          <el-menu mode="horizontal" :router="true" :default-active="activeIndex">
            <el-menu-item index="/home">首页</el-menu-item>
            <el-menu-item index="/order">我的订单</el-menu-item>
          </el-menu>
        </div>
        <div class="user-actions">
          <cart-badge @show-cart="cartVisible = true" />
        </div>
        <div class="user-info">
          <template v-if="isLogin">
            <el-dropdown @command="handleUserCommand">
              <span class="el-dropdown-link">
                {{ (userInfo && (userInfo.nickname || userInfo.username)) || '用户' }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="address">收货地址</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button type="text" @click="$router.push('/login')">登录</el-button>
            <el-button type="text" @click="$router.push('/register')">注册</el-button>
          </template>
        </div>
      </div>
    </header>
    
    <!-- 主要内容 -->
    <main class="main-content">
      <router-view />
    </main>
    
    <!-- 底部 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="links">
          <a href="javascript:;">关于我们</a>
          <a href="javascript:;">商务合作</a>
          <a href="javascript:;">联系我们</a>
          <a href="javascript:;">加入我们</a>
          <a href="javascript:;">隐私政策</a>
        </div>
        <div class="copyright">
          © 2025 美味外卖 - 模仿美团外卖的项目
        </div>
      </div>
    </footer>

    <!-- 购物车抽屉 -->
    <cart :visible.sync="cartVisible" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CartBadge from '@/components/CartBadge.vue'
import Cart from '@/components/Cart.vue'

export default {
  name: 'UserLayout',
  components: {
    CartBadge,
    Cart
  },
  data() {
    return {
      searchText: '',
      activeIndex: '/',
      cartVisible: false
    }
  },
  computed: {
    ...mapGetters(['isLogin']),
    userInfo() {
      return this.$store.state.userInfo;
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.activeIndex = route.path
      },
      immediate: true
    }
  },
  created() {
    // 监听URL参数，如果存在checkout参数为true，则显示购物车
    if (this.$route.query.checkout === 'true') {
      this.cartVisible = true
    }
  },
  methods: {
    onSearch() {
      if (this.searchText) {
        console.log('Layout searching for:', this.searchText); // Debug log
        this.$router.push({
          path: '/search-results',
          query: { q: this.searchText }
        })
      }
    },
    handleUserCommand(command) {
      if (command === 'profile') {
        this.$router.push('/profile')
      } else if (command === 'address') {
        this.$router.push('/profile?tab=address')
      } else if (command === 'logout') {
        this.$confirm('确定要退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('logout')
          this.$message.success('已退出登录')
          this.$router.push('/')
        }).catch(() => {})
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.header-content {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
}
.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ff6000;
  margin-right: 30px;
  cursor: pointer;
}
.location {
  display: flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}
.search {
  width: 300px;
  margin-right: auto;
}
.nav {
  margin-right: 20px;
}
.user-actions {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.user-info {
  display: flex;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.main-content {
  flex: 1;
  margin-top: 60px;
  background-color: #f5f5f5;
}
.footer {
  background-color: #f7f7f7;
  padding: 30px 0;
  margin-top: 20px;
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.links {
  margin-bottom: 10px;
}
.links a {
  margin: 0 10px;
  color: #666;
  text-decoration: none;
}
.links a:hover {
  color: #ff6000;
}
.copyright {
  color: #999;
  font-size: 12px;
}
</style> 